<template>
  <div class="dialog-container">
    <el-steps :active="dialogActive" finish-status="success" simple style="margin-top: 20px">
      <el-step title="基本信息" ></el-step>
      <el-step title="选择门店" ></el-step>
      <el-step title="优惠配置" ></el-step>
    </el-steps>
    <div>
      <BaseInfo ref="baseInfo" v-if="dialogActive === 0"></BaseInfo>
      <AgentInfo ref="agentInfo" v-else-if="dialogActive === 1"></AgentInfo>
      <GoodsInfo ref="goodsInfo" v-else-if="dialogActive === 2"></GoodsInfo>
    </div>
  </div>
</template>

<script>
import BaseInfo from '@/views/coupon/component/BaseInfo';
import AgentInfo from '@/views/coupon/component/AgentInfo';
import GoodsInfo from '@/views/coupon/component/GoodsInfo';

export default {
  name: 'EditDialog',
  props: ['dialogActive'],
  components: {BaseInfo, AgentInfo, GoodsInfo},
  data() {
    return {
      stepActive: 0,
    }
  },
  mounted() {
  },
  methods: {
    /*
    * 下一步
    * */
    handleStepNext() {

    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../styles/variables";
.dialog-footer {
  text-align: right;
  margin-top: 36px;
}
::v-deep {
  .el-step__title.is-success {
    color: $mainColor;
    font-weight: bold;
  }
  .el-step__head.is-success {
    color: $mainColor;
    border-color: $mainColor;
  }
}
</style>
